<template>
  <div
    :class="{
      'web-container': deviceType == 'web',
      'mobile-container': deviceType == 'mobile',
      'ipad-container': deviceType == 'ipad',
    }"
  >
    <div class="indexBanner">
      <el-image
        style="width: 100%; height: 100%"
        :src="bannerUrl"
        fit="cover"
      ></el-image>
    </div>

    <!-- 版心 -->
    <div class="pageArea">
      <!-- 百家姓智能查找 -->
      <div class="section">
        <div class="section_title">
          <div class="pageH1">百家姓智能查找</div>
        </div>
        <div class="section_content">
          <div class="searchModel">
            <div class="leftNameBox">
              <div class="scrollable-container">
                <div class="name">
                  <div
                    class="nameItem"
                    v-for="(item, index) in societyList"
                    :key="index"
                    @click="hanleGoNextPage(item, index)"
                  >
                    {{ item.ss_surname }}
                  </div>
                </div>
              </div>
            </div>
            <div class="rightSearchBox">
              <div class="searchBox">
                <el-input v-model="input" placeholder="姓氏查詢請輸入搜索內容">
                  <i slot="prefix" class="el-input__icon el-icon-search"></i
                ></el-input>
                <div class="searchBottom">查詢</div>
              </div>

              <div class="letterBox">
                <div
                  :class="
                    currentIndex == index ? 'activeLetterItem' : 'letterItem'
                  "
                  v-for="(item, index) in letterList"
                  :key="index"
                  @click="handlSelectName(item, index)"
                >
                  <span>{{ item.name }}</span>
                  <span class="zhuyin">{{ item.zhuYin }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 热搜姓氏 -->
      <div class="section">
        <div class="section_title">
          <div class="pageH1">熱搜姓氏</div>
        </div>
        <div class="section_content">
          <div class="HotPage">
            <div
              class="BoxItem"
              v-for="(HotItem, HotIndex) in hotNameList"
              :key="HotIndex"
              @click="hanleGoNextPage(HotItem, HotIndex)"
            >
              {{ HotItem.name }}
            </div>
          </div>
        </div>
      </div>

      <!-- 歷史名人 -->
      <div class="section">
        <div class="section_title">
          <div class="pageH1">歷史名人</div>
          <div class="more">查看全部 ></div>
        </div>
        <div class="section_content">
          <div class="swiper-container-historyBox">
            <swiper :options="swiperoptionHistory" ref="mySwiper">
              <swiper-slide v-for="(item, index) in historyList" :key="index">
                <div class="historyItem">
                  <div class="topImg">
                    <el-image
                      style="width: 100%; height: 100%"
                      :src="item.historyUrl"
                      fit="cover"
                    ></el-image>
                  </div>
                  <div class="name">
                    {{ item.historyName }}
                  </div>
                </div>
              </swiper-slide>
            </swiper>
            <div
              class="nextPrev"
              v-if="deviceType == 'web' || deviceType == 'ipad'"
            >
              <div class="swiper-button-prev" slot="button-prev"></div>
              <div class="swiper-button-next" slot="button-next"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
  
  <script>
import { dalu } from "@/api/test";

export default {
  name: "Family",
  data() {
    return {
      bannerUrl: require("@/assets/images/family/nameBanner.png"), //banner
      input: "",
      // 字母列表
      currentIndex: "0",
      letterList: [
        {
          name: "A",
          zhuYin: "(ㄚ)",
        },
        {
          name: "B",
          zhuYin: "(ㄅ)",
        },
        {
          name: "C",
          zhuYin: "(ㄘ)",
        },
        {
          name: "D",
          zhuYin: "(ㄉ)",
        },
        {
          name: "E",
          zhuYin: "(ㄜ)",
        },
        {
          name: "F",
          zhuYin: "(ㄈ)",
        },
        {
          name: "G",
          zhuYin: "(ㄍ)",
        },
        {
          name: "H",
          zhuYin: "(ㄏ)",
        },
        {
          name: "J",
          zhuYin: "(ㄐ)",
        },
        {
          name: "K",
          zhuYin: "(ㄎ)",
        },
        {
          name: "L",
          zhuYin: "(ㄌ)",
        },
        {
          name: "M",
          zhuYin: "(ㄇ)",
        },
        {
          name: "N",
          zhuYin: "(ㄋ)",
        },
        {
          name: "O",
          zhuYin: "(ㄛ)",
        },
        {
          name: "P",
          zhuYin: "(ㄆ)",
        },
        {
          name: "Q",
          zhuYin: "(ㄑ)",
        },
        {
          name: "R",
          zhuYin: "(ㄖ)",
        },
        {
          name: "S",
          zhuYin: "(ㄙ)",
        },
        {
          name: "T",
          zhuYin: "(ㄊ)",
        },
        {
          name: "W",
          zhuYin: "(ㄨ)",
        },
        {
          name: "X",
          zhuYin: "(ㄒ)",
        },
        {
          name: "Y",
          zhuYin: "(ㄗ)",
        },
        {
          name: "Z",
          zhuYin: "(ㄗ)",
        },
      ],

      // 搜查字母对应姓氏列表
      societyList: [],

      // 姓氏列表
      hotNameList: [
        {
          name: "趙",
        },
        {
          name: "錢",
        },
        {
          name: "孫",
        },
        {
          name: "李",
        },
        {
          name: "周",
        },
        {
          name: "吳",
        },
        {
          name: "何",
        },
        {
          name: "鄭",
        },
        {
          name: "王",
        },
        {
          name: "馮",
        },
        {
          name: "陳",
        },
        {
          name: "褚",
        },
        {
          name: "衛",
        },
        {
          name: "曹",
        },
        {
          name: "唐",
        },
        {
          name: "蕭",
        },
        {
          name: "馬",
        },
        {
          name: "朱",
        },
        {
          name: "謝",
        },
        {
          name: "宋",
        },
        {
          name: "高",
        },
      ],

      // 历史名人
      historyList: [
        {
          historyUrl: require("@/assets/images/family/history_01.png"),
          historyName: "納訓",
        },
        {
          historyUrl: require("@/assets/images/family/history_02.png"),
          historyName: "羋八子",
        },
        {
          historyUrl: require("@/assets/images/family/history_03.png"),
          historyName: "列子",
        },
        {
          historyUrl: require("@/assets/images/family/history_03.png"),
          historyName: "狼瞫",
        },
        {
          historyUrl: require("@/assets/images/family/history_01.png"),
          historyName: "納訓",
        },
        {
          historyUrl: require("@/assets/images/family/history_02.png"),
          historyName: "羋八子",
        },
        {
          historyUrl: require("@/assets/images/family/history_03.png"),
          historyName: "列子",
        },
        {
          historyUrl: require("@/assets/images/family/history_03.png"),
          historyName: "狼瞫",
        },
      ],
      swiperoptionHistory: {
        slidesPerView: 4,
        spaceBetween: 16,
        mousewheelControl: true,
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
        mousewheelControl: true,
      },
      name: "A",
    };
  },
  created() {
    this.checkSwiper();
    this.getName();
  },
  methods: {
    // 接口
    getName() {
      dalu(this.name).then((res) => {
        res.data.forEach((item) => {
          this.societyList.push(item);
        });
      });
    },

    checkSwiper() {
      if (this.deviceType == "web" || this.deviceType == "ipad") {
        this.swiperoptionHistory.slidesPerView = 4;
      } else {
        this.swiperoptionHistory.slidesPerView = 2.5;
      }
    },

    handlSelectName(item, index) {
      this.name = item.name;
      this.currentIndex = index;
      if (item.name == this.name) {
        this.societyList = [];
        this.getName();
      }
    },

    hanleGoNextPage(HotItem, index) {
      this.$router.push({
        name: "SearchPage",
        query: {
          ssId: HotItem.ss_id,
          ssName: HotItem.ss_surname,
        },
      });
    },
  },
};
</script>
  
  <style lang="scss" scoped>
@import "~@/assets/viewCss/family/family.scss";
</style>